/*
 * @Author: Yzq
 * @Date: 2021-03-31 16:36:02
 * @LastEditTime: 2021-04-06 18:21:05
 * @LastEditors: Yzq
 */
import React from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  TextInput,
  Dimensions,
  ScrollView,
} from 'react-native';

import User from './Dao/user';
import I18n from './res/index';

const {height, width} = Dimensions.get('window');

class Login extends React.Component {
  constructor(props: any) {
    super(props);
  }

  state = {
    username: User?.username || '',
    pwd: User?.pwd || '',
    isCheck: User?.pwd ? true : false,
    isLoged: false,
  };

  componentDidMount() {
    //TODO:初始化记住密码
  }

  render() {
    return (
      <ScrollView keyboardShouldPersistTaps={'never'} style={{flex: 1}}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
            paddingHorizontal: 20,
            height,
            width,
          }}>
          {/* 输入用户名 */}
          <TextInput
            placeholder={I18n.t('login.ipt_username')}
            style={{
              width: '100%',
              borderWidth: 1,
              paddingHorizontal: 10,
              paddingVertical: 3,
              height: 40,
            }}
            onChangeText={value => {
              this.setState({
                username: value,
              });
            }}
            value={this.state.username || ''}
          />
          {/* 输入密码 */}
          <TextInput
            placeholder={I18n.t('login.ipt_pwd')}
            style={{
              width: '100%',
              marginTop: 20,
              borderWidth: 1,
              paddingHorizontal: 3,
              paddingVertical: 2,
              height: 40,
            }}
            onChangeText={value => {
              this.setState({
                pwd: value,
              });
            }}
            secureTextEntry={true}
            value={this.state.pwd || ''}
          />
          {/* 记住密码 */}
          <TouchableOpacity
            onPress={() => {
              this.setState({
                isCheck: !this.state.isCheck,
              });
            }}
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              alignSelf: 'flex-start',
              marginVertical: 10,
            }}>
            <View
              style={{
                width: 20,
                height: 20,
                borderWidth: 1,
                borderRadius: 10,
                marginRight: 5,
                backgroundColor: this.state.isCheck ? 'red' : '#fff',
              }}
            />
            <Text>{I18n.t('login.remember_pwd')}</Text>
          </TouchableOpacity>
          {/* 登录按钮 */}
          <TouchableOpacity
            onPress={() => {
              User.username = this.state.username;
              this.props.navigation.replace('Tab');
              if (this.state.isCheck) {
                User.storage(
                  this.state.username,
                  this.state.pwd,
                  this.state.isLoged,
                );
              } else {
                User.clear();
              }
            }}
            style={{
              alignItems: 'center',
              justifyContent: 'center',
              marginTop: 20,
              borderWidth: 1,
              paddingHorizontal: 3,
              paddingVertical: 2,
              height: 40,
              backgroundColor: '#2d2c2c',
              width: width - 40,
            }}>
            <Text
              style={{
                textAlign: 'center',
                color: '#fff',
                fontWeight: 'bold',
                marginVertical: 5,
              }}>
              {I18n.t('login.login')}
            </Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    );
  }
}

export default Login;
